<template>
  <el-container class="head-container">
    <el-header>
      <img src="../assets/ccnu.png" alt="" height="50px" />
      <div>
        <i class="el-icon-bell"></i>
        <i class="el-icon-s-custom"></i>
      </div>
    </el-header>
    <!-- 页面主体区域 -->
    <div class="yy">
      <el-row :gutter="100">
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../assets/4.jpg" class="image" />
            <div style="padding: 14px" class="item">
              <div>
                项目名称：<input type="text">
              </div>
              <br />
              <div>
                项目描述：<input type="text" style="width:161px;height:63px">
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" size="small" style="width: 249px" >主要按钮</el-button>
              </div>
            </div>
          </el-card></el-col
        >
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../assets/4.jpg" class="image" />
             <div style="padding: 14px" class="item">
              <div>
                项目名称：<input type="text">
              </div>
              <br />
              <div>
                项目描述：<input type="text" style="width:161px;height:63px">
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" size="small" style="width: 249px" >主要按钮</el-button>
              </div>
            </div>
          </el-card></el-col
        >
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../assets/4.jpg" class="image" />
             <div style="padding: 14px" class="item">
              <div>
                项目名称：<input type="text">
              </div>
              <br />
              <div>
                项目描述：<input type="text" style="width:161px;height:63px">
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" size="small" style="width: 249px" >主要按钮</el-button>
              </div>
            </div>
          </el-card></el-col
        >
      </el-row>
      <br>
      <br><br>
       <el-row :gutter="100">
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../assets/4.jpg" class="image" />
            <div style="padding: 14px" class="item">
              <div>
                项目名称：<input type="text">
              </div>
              <br />
              <div>
                项目描述：<input type="text" style="width:161px;height:63px">
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" size="small" style="width: 249px" >主要按钮</el-button>
              </div>
            </div>
          </el-card></el-col
        >
        <el-col :span="6">
          <el-card :body-style="{ padding: '0px' }">
            <img src="../assets/4.jpg" class="image" />
             <div style="padding: 14px" class="item">
              <div>
                项目名称：<input type="text">
              </div>
              <br />
              <div>
                项目描述：<input type="text" style="width:161px;height:63px">
              </div>
              <div class="bottom clearfix">
                <el-button type="primary" size="small" style="width: 249px" >主要按钮</el-button>
              </div>
            </div>
          </el-card></el-col
        >
       
        >
      </el-row>
    </div>
  </el-container>
</template> 

<script>
export default {
  name: "Program",
  components: {},
  data() {
    return {
      form: {
        program: "",
        desc: "",
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>
<style lang="less" scoped>
.head-container {
  height: 100%;
}
.login-container {
  width: auto;
  height: auto;
  margin-left: 100px;
  margin-right: 100px;
  box-shadow: 0px -1px 0px 0px #e5e5e5, /*上边阴影 */ -0.2px 0px 0px 0px #e5e5e5,
    /*左边阴影  */ 0.2px 0px 0px 0px #e5e5e5,
    /*右边阴影 */ 0px 1px 0px 0px #e5e5e5; /*下边阴影 */
}
.el-header {
  /*设置显示为flex布局 */
  display: flex;
  /* 设置为flex左右布局 */
  justify-content: space-between;
  /* 左右内边距为0 */
  padding-left: 0;
  /* 元素上下居中 */
  align-items: center;
  margin-bottom: 10px;
  //下边阴影
  box-shadow: 0px 1px 0px 0px #e5e5e5;
  // 内嵌的div样式
  > div {
    display: flex;
    align-items: center;
    > i {
      margin-left: 10px;
    }
  }
}

.el-row {
  width: auto;
  height: auto;

  /* height: 100px; */
}
.yy {
  margin-left: 200px;
}
.el-card {
  height: 40vh;
  width: 20vw;
}

.el-form {
  margin: 0 20% 0 20%;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
